<template>
  <div class="app-container ssIndex">
    <!-- 我是 培训 -->
    <div class="banner">
      <el-carousel height="350px">
        <el-carousel-item>
          <img src="@/assets/pc/px_banner.png"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="kind">
      <div class="box">
        <ul>
          <li>
            <label class="titleLabel">类型：</label>
            <el-radio-group v-model="query.projectId" @change="getList">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button
                :label="p.id"
                v-for="p in projectList"
                :key="p.id"
                >{{ p.name }}</el-radio-button
              >
            </el-radio-group>
          </li>
          <li>
            <label  class="titleLabel">状态：</label>
            <el-radio-group v-model="query.flag" @change="getList">
              <el-radio-button label="0">全部</el-radio-button>
              <el-radio-button label="1">报名中</el-radio-button>
              <el-radio-button label="2">进行中</el-radio-button>
              <el-radio-button label="3">即将开始</el-radio-button>
              <el-radio-button label="4">报名未开始</el-radio-button>
              <el-radio-button label="5">培训未开始</el-radio-button>
              <el-radio-button label="6">已结束</el-radio-button>
            </el-radio-group>
          </li>
          <li>
            <label class="titleLabel">时间：</label>
            <el-radio-group v-model="query.yearMonth" @change="getList">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button v-for="m in monthList" :key="m" :label="m" />
            </el-radio-group>
          </li>
        </ul>
      </div>
    </div>

    <div class="box">
      <div class="listTitle">
        <h3><label>培训列表</label></h3>
        <div class="search">
          <el-input
            v-model.trim="query.trainName"
            placeholder="请输入培训名称查询"
            class="input-with-select"
            @keydown.enter="getList"
          >
            <template #append>
              <el-button type="danger" round @click="getList">查询</el-button>
            </template>
          </el-input>
        </div>
      </div>

      <el-row :gutter="30" class="pt-20">
        <el-col v-for="n in list" :span="8" class="content">
          <el-card
            :body-style="{ padding: '0px' }"
            @click="goDetail(n.trainId)"
          >
            <el-image
              style="width: 100%; height: 310px;"
              :src="n.cover"
              fit="cover"
            />
            <div style="padding:0 14px">
              <h2 style="font-size: 18px">{{ n.trainName }}</h2>
              <div class="bottom">
                <p class="time">
                  <span class="icon-span"
                    ><el-icon><Calendar /></el-icon
                  ></span>
                  培训时间：{{ n.trainTime }}
                </p>
                <p class="time">
                  <span class="icon-span"
                    ><el-icon><Clock /></el-icon
                  ></span>
                  报名时间：{{ n.enrollTime }}
                  <span
                    class="train-card cared1"
                    v-if="n.statusStr == '报名中'"
                    >{{ n.statusStr }}</span
                  >
                  <span
                    class="train-card cared2"
                    v-if="n.statusStr == '进行中'"
                    >{{ n.statusStr }}</span
                  >

                  <span
                    class="train-card cared4"
                    v-if="n.statusStr == '已结束'"
                    >{{ n.statusStr }}</span
                  >
                  <span
                    v-if="
                      n.statusStr == '培训未开始' || n.statusStr == '报名未开始'
                    "
                    class="train-card cared3"
                    >{{ n.statusStr }}</span
                  >
                </p>
                <p class="time">
                  <span class="icon-span"
                    ><el-icon><Location /></el-icon
                  ></span>
                  培训地点：{{ n.address }}
                </p>
              </div>
            </div>
          </el-card>
          <br />
        </el-col>
      </el-row>
      <pagination
        v-show="total > 0"
        v-model:page="query.pageNum"
        v-model:limit="query.pageSize"
        :total="total"
        @pagination="getList"
      />
      <el-empty description="暂无数据" v-if="list?.length == 0" />
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import { reactive, onMounted } from "@vue/runtime-core";
import { useRouter } from "vue-router";
import { getBaseProjectList } from "@/api/oam/basic";

import * as train from "@/api/train/pc";

const router = useRouter();
const { proxy } = getCurrentInstance();
const list = ref([]);
const projectList = ref([]);
const monthList = ref([]);
const activeName = ref("");
const total = ref(0);
const query = ref({
  projectId: "0",
  flag: "0",
  yearMonth: null,
  trainName: null,
  pageSize: 12,
  pageNum: 1,
});
onMounted(() => {
  getList();
  getProjectList();
  getMonthList();
});

async function getProjectList() {
  let res = await getBaseProjectList();
  projectList.value = res.rows;
}

function getMonthList() {
  let data = new Date();
  //获取年
  let year = data.getFullYear();
  //获取月
  let mon = data.getMonth() + 1;
  let arr = [];
  // for (let i = 0; i < 6; i++) {
  //   if (mon <= 0) {
  //     year = year - 1;
  //     mon = mon + 12;
  //   }
  //   if (mon < 10) {
  //     mon = "0" + mon;
  //   }
  //   arr.push(year + "-" + mon);
  //   mon = mon - 1;
  // }

  if (mon - 6 < 0) {
    year = year - 1;
    mon = 12 + (mon - 6);
  }
  for (let i = 0; i < 12; i++) {
    if (mon <= 0) {
      year = year + 1;
      mon = mon - 12;
    }
    if (mon > 12) {
      mon = 1;
      year = year + 1;
    }
    if (mon < 10) {
      mon = "0" + mon;
    }
    arr.push(year + "-" + mon);
    mon = mon * 1 + 1;
  }

  monthList.value = arr;
}

// 时间处理
function filterTime(timer) {
  return timer.slice(0, 10);
}

async function getList() {
  let res = await train.getMonthList(query.value);
  list.value = res.rows;
  list.value?.forEach((item) => {
    item.trainTime =
      filterTime(item.trainStart) + "-" + filterTime(item.trainEnd);
    item.enrollTime =
      filterTime(item.enrollStart) + "-" + filterTime(item.enrollEndStr);
  });
  total.value = res.total;
}

function goDetail(id) {
  router.push({
    path: `list/list/`,
    query: {
      id: id,
    },
  });
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';
.time{
  font-size: 14px;
  color: #4C5359;}
.icon-span {
  position: relative;
  top: 0.1rem;
}
.app-container {
  background: #f5f7f9;
  padding: 0;
}

.matchItem {
  cursor: pointer;
  margin-bottom: 40px;
  min-height: 180px;
  background: #ffffff;
  position: relative;
  border-radius: 10px;

  .el-icon {
    color: rgba(210, 215, 217, 1);
    margin-right: 4px;
  }

  .el-tag {
    margin-left: 6px;
  }

  .el-avatar {
    position: absolute;
    left: 20px;
    top: 30px;
  }

  .content {
    margin-bottom: 20px;
  }
  .info {
    padding: 12px 0 0 140px;

    p {
      font-size: 14px;
      display: flex;
    }
  }

  .typeTag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 0px 10px 0px 10px;
    padding: 2px 12px;
    background: #ff8124;
    font-size: 14px;
    color: #fff;
  }
  .typeTag.blue {
    background: #00a0e9;
  }
  h3 {
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    text-overflow: ellipsis;
  }

  &:hover h3 {
    font-weight: bold;
  }
}

.el-pagination {
  justify-content: center;
  --el-pagination-bg-color: none;
}

.kind {
  background: #fff;
  margin: 0 0 30px;

  ul {
    list-style: none;
    padding: 30px 0 10px;

    li {
      margin: 0 0 20px;
      display: flex;
      align-items: center;
      .titleLabel{
        width: 5em;
        position:relative;
        padding-left:15px
      }
      .titleLabel::before {
        position: absolute; /*绝对定位*/
        top: 50%; /*Y轴方向偏移自身高度的50%*/
        transform: translatey(-40%); /*Y轴方向偏移微调*/
        left:0; /*紧靠容器左边缘*/
        content: ''; /*伪元素需要有内容才能显示*/
        width: 3px; /*伪元素宽度*/
        height: 18px; /*伪元素高度*/
        background-color: #d43e3e; /*伪元素颜色*/

     }
    }
  }
}
.ssIndex{
  .kind {
    ul{
      padding-top:10px;
      li{
      margin:0;
      padding:20px 0;
      border-bottom:1px solid #ddd;
    }
    li:last-child{
      border-bottom:none;
    }
    }
   
  }
  .matchItem{
    display: flex;
    flex-direction: column;
    padding:20px;
    .matchCover{
      position: static;
      height:230px;
    }
    .textBottom{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .el-tag{
      height:40px;
      min-width:90px;
      border-radius: 20px;
      font-size:18px;
    }
  }
}
.pagination-container {
  height: 56px;
}
.listTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.train-card {
  border: 1px solid orange;
  color: orange;

  border-radius: 5px;
  padding: 2px;
  font-family: PingFangSC-Regular;
  float: right;
  margin-right: 80px;
}
.cared1 {
  border: 1px solid $--color-primary;
  color: $--color-primary;
}
.cared2 {
  border: 1px solid #ff8124;
  color: #ff8124;
}

.cared3 {
  border: 1px solid #40d8ee;
  color: #40d8ee;
}
.cared4 {
  border: 1px solid #d9d9d9;
  color: #d9d9d9;
}

.search {
  position: relative;
  :deep(.el-input__inner) {
    border-radius: 20px;
    background-color: #fff;
    height: 40px;
    width: 380px;
    border: 0;
  }
  :deep(.el-input-group__append) {
    width: 56px;
    height: 30px;
    background: linear-gradient(270deg, $--color-primary, $--color-danger);
    border-radius: 15px;
    color: #fff;
    position: absolute;
    top: 5px;
    right: 5px;
  }
}
</style>
